<!--任务实施-->
<template>
    <div class="main-wrapper taskImplement-wrapper">
        <div class="page-header">
            <div class="clearfix title-box">
                <span class="fl fz20">实施管理</span>
                <div class="fr clearfix icon-box">
                    <img class="mr20 fl cursor_p" :src="hoverIndex != index ? img.icon : img.iconActive"
                         v-for="(img, index) in imgList" :key="img.id" @mouseenter="mouseEnter(index)"
                         @mouseleave="mouseLeave(-1)" @click="iconClick(img.id)">
                    <el-button class="add-btn" icon="el-icon-plus" @click="creatNew">实施计划</el-button>
                </div>
            </div>
            <div class="nav-box">
                <div class="nav-list pl20">
                    <span class="nav-item cursor_p fz16" v-for="(item, index) in navList" :key="item.id"
                          :class="currentNav == index ? 'active-nav' : ''"
                          @click="switchNav(index)">{{item.name}}</span>
                </div>
            </div>
        </div>
        <div class="main-content p20 w1200 m20">
            <div class="content-box">
                <div class="table-box" v-if="currentNav == 0">
                    <template>
                        <el-table class="" border ref="multipleTable" :data="tableData1" tooltip-effect="dark"
                                  style="width: 100%" max-height="500px" @row-click="handleRow">
                            <el-table-column align="center" type="selection" width="55"></el-table-column>
                            <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
                            <el-table-column align="center" prop="isFinished" label="是否完成？" width="120">
                                <template slot-scope="scope">
                                    <el-checkbox v-model="scope.row.isFinished"></el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="planName" label="计划名称" width="150"
                                             show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column align="center" prop="taskTime" label="工时估算" width="100">
                            </el-table-column>
                            <el-table-column align="center" prop="fromTask" label="所属任务" width="130"
                                             show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column align="center" prop="relatedIncome" label="关联收入" width="100">
                            </el-table-column>
                            <el-table-column align="center" prop="owner" label="拥有者" width="90">
                            </el-table-column>
                            <el-table-column align="center" prop="creater" label="创建人" width="90">
                            </el-table-column>
                            <el-table-column align="center" prop="createTime" label="创建时间" width="150">
                            </el-table-column>
                            <el-table-column align="center" prop="updateTime" label="最近修改时间" width="150">
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
                <div class="table-box" v-if="currentNav == 1">
                    <template>
                        <el-table class="" border ref="multipleTable" :data="tableData2" tooltip-effect="dark"
                                  style="width: 100%" max-height="500px" @row-click="handleRow">
                            <el-table-column align="center" type="selection" width="55"></el-table-column>
                            <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
                            <el-table-column align="center" prop="isFinished" label="是否完成？" width="120">
                                <template slot-scope="scope">
                                    <el-checkbox v-model="scope.row.isFinished"></el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="planName" label="计划名称" width="150"
                                             show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column align="center" prop="taskTime" label="工时估算" width="100">
                            </el-table-column>
                            <el-table-column align="center" prop="fromTask" label="所属任务" width="130"
                                             show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column align="center" prop="relatedIncome" label="关联收入" width="100">
                            </el-table-column>
                            <el-table-column align="center" prop="owner" label="拥有者" width="90">
                            </el-table-column>
                            <el-table-column align="center" prop="creater" label="创建人" width="90">
                            </el-table-column>
                            <el-table-column align="center" prop="createTime" label="创建时间" width="150">
                            </el-table-column>
                            <el-table-column align="center" prop="updateTime" label="最近修改时间" width="150">
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
                <div class="table-box" v-if="currentNav == 2">
                    <template>
                        <el-table class="" border ref="multipleTable" :data="tableData3" tooltip-effect="dark"
                                  style="width: 100%" max-height="500px" @row-click="handleRow">
                            <el-table-column align="center" type="selection" width="55"></el-table-column>
                            <el-table-column align="center" type="index" label="序号" width="60"></el-table-column>
                            <el-table-column align="center" label="是否完成？" width="120">
                                <template slot-scope="scope">
                                    <el-checkbox v-model="scope.row.isFinished"></el-checkbox>
                                </template>
                            </el-table-column>
                            <el-table-column align="center" prop="planName" label="计划名称" width="150"
                                             show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column align="center" prop="taskTime" label="工时估算" width="100">
                            </el-table-column>
                            <el-table-column align="center" prop="fromTask" label="所属任务" width="130"
                                             show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column align="center" prop="relatedIncome" label="关联收入" width="100">
                            </el-table-column>
                            <el-table-column align="center" prop="owner" label="拥有者" width="90">
                            </el-table-column>
                            <el-table-column align="center" prop="creater" label="创建人" width="90">
                            </el-table-column>
                            <el-table-column align="center" prop="createTime" label="创建时间" width="150">
                            </el-table-column>
                            <el-table-column align="center" prop="updateTime" label="最近修改时间" width="150">
                            </el-table-column>
                        </el-table>
                    </template>
                </div>
            </div>
        </div>
        <!--导入Excel-->
        <el-dialog class="dialog-box" title="上传Excel" :visible.sync="uploadDialogVisible" width="34%">
            <div class="dialog-main clearfix upload-dialog">
                <div class="explain">支持10MB以内的xls、xlsx文件,
                    最大行数不超过20000行，列数不超过200列；导入多选类型的控件，请确保Excel字段内各个选项/人员用“，”隔开，否则将无法正常识别数据
                </div>
                <div class="upload-file">
                    <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>选择文件</em></div>
                    </el-upload>
                </div>
                <div class="dialog-footer">
                    <el-button @click="uploadDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="uploadExcel">上传</el-button>
                </div>
            </div>
        </el-dialog>
        <!--导出弹框-->
        <el-dialog class="dialog-box" title="导出Excel" :visible.sync="exportDialogVisible" width="34%">
            <div class="dialog-main clearfix export-dialog">
                <div class="dialog-title">将视图下数据导出为Excel</div>
                <p>导出字段</p>
                <div>
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
                    </el-checkbox>
                    <div style="margin: 15px 0;"></div>
                    <el-checkbox-group v-model="allChecked" @change="handleCheckedFieldsChange">
                        <el-checkbox v-for="check in checkList" :label="check" :key="check">{{check}}</el-checkbox>
                    </el-checkbox-group>
                </div>
                <p>导出多条关联表记录</p>
                <div>
                    <el-checkbox>关联收入</el-checkbox>
                </div>
                <p>其他</p>
                <div>
                    <el-checkbox>列统计结果</el-checkbox>
                    <el-checkbox>记录分享链接</el-checkbox>
                </div>
                <div class="dialog-footer">
                    <el-button @click="exportDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="exportDialogVisible = false">导出</el-button>
                </div>

            </div>
        </el-dialog>
        <!--统计抽屉-->
        <div class="statistics-box">
            <el-drawer custom-class="drawer-box" title="统计" size="600" :visible.sync="statisticsDrawer">
                <div id="category" ref="category" style="width: 450px;height:240px;">
                    <div>新增记录</div>
                    <div class="range">范围：本月</div>
                    <div class="content">
                        <p class="record-num">记录数量</p>
                        <span>19</span>
                        <p class="line">--</p>
                    </div>
                </div>
                <div class="margin-line"></div>
                <!--每日新增项目图表-->
                <div id="newRecord" class="mb20" ref="newRecord" style="width: 450px;height:380px;"></div>
            </el-drawer>
        </div>
        <!--新增记录-->
        <el-dialog class="dialog-box" title="创建实施计划" :visible.sync="createDialogVisible" width="680px">
            <div class="dialog-main detail-dialog create-asset">
                <div class="base-detail">
                    <el-form ref="form" :model="newRecordForm" label-width="86px">
                        <el-form-item label="是否完成？" class="w220">
                            <el-checkbox v-model="newRecordForm.isFinished"></el-checkbox>
                        </el-form-item>
                        <el-form-item label="计划名称" class="w546">
                            <el-input v-model="newRecordForm.planName"></el-input>
                        </el-form-item>
                        <el-form-item label="工时估算" class="w220">
                            <el-input v-model="newRecordForm.taskTime"></el-input>
                        </el-form-item>
                        <el-form-item label="所属任务" class="w546">
                            <el-input v-model="newRecordForm.fromTask"></el-input>
                        </el-form-item>
                        <el-form-item label="关联收入" class="w546">
                            <el-input v-model="newRecordForm.relatedIncome"></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="dialog-footer clearfix">
                        <div class="fl">
                            <el-checkbox v-model="checked">保存后继续创建下一条</el-checkbox>
                        </div>
                        <div class="fr">
                            <el-button @click="createDialogVisible = false">取消</el-button>
                            <el-button type="primary" @click="createDialogVisible = false" v-if="!checked">确定
                            </el-button>
                            <el-button type="primary" @click="createDialogVisible = false" v-if="checked">下一条
                            </el-button>
                        </div>

                    </div>
                </div>

            </div>
        </el-dialog>
        <!--详情-->
        <el-dialog class="dialog-box" title="详情" :visible.sync="detailDialogVisible" width="1300px">
            <div class="dialog-main clearfix detail-dialog">
                <div class="fl  base-detail">
                    <div class="head  clearfix ">
                        <span>项目管理</span>
                        <span class="fr">{{rowValueForm.creater}}创建于{{rowValueForm.createTime}}</span>
                    </div>
                    <div class="name">
                        <img src="@/assets/images/user.png"/><span>{{rowValueForm.itemName}}</span>
                    </div>
                    <el-form ref="form" :model="rowValueForm" label-width="86px">
                        <el-form-item label="是否完成？" class="w220">
                            <el-checkbox v-model="rowValueForm.isFinished"></el-checkbox>
                        </el-form-item>
                        <el-form-item label="计划名称" class="w546">
                            <el-input v-model="rowValueForm.planName"></el-input>
                        </el-form-item>
                        <el-form-item label="工时估算" class="w220">
                            <el-input v-model="rowValueForm.taskTime"></el-input>
                        </el-form-item>
                        <el-form-item label="所属任务" class="w546">
                            <el-input v-model="rowValueForm.fromTask"></el-input>
                        </el-form-item>
                        <el-form-item label="关联收入" class="w546">
                            <el-input v-model="rowValueForm.relatedIncome"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="fl  record-detail">
                    <el-button type="primary" class="btn">关联收入({{lines.length}})</el-button>
                    <div class="infomation">
                        <div class="infomation-title">
                    		<span v-for="item in titles">{{item}}</span>
                    	</div>
                        <ul>
                            <li v-for="(item,index) in lines">
                            	<span class="serial-number">{{index+1}}</span>
                            	<span>{{item.costName}}</span>
                            	<span>{{item.amountMoney}}</span>
                            	<span>{{item.time}}</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script src="./taskImplement.js"></script>

<style scoped lang="scss">
    @import "taskImplement";
</style>
